<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element-theme-darkplus - Element 暗黑主题</title>
  <meta name="description" content="Element-theme-darkplus，一套基于 Element 最新版 2.15.14 的主题库">
  <link rel="shortcut icon" href="favicon.ico">

  <script src="https://unpkg.com/element-theme-darkplus/utils/dark-mode.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="https://unpkg.com/element-theme-darkplus/lib/index.color.css">

  <style>
    body {
      min-width: 350px;
      min-height: 100vh;
      margin: 0;
      color: #303133;
      background-color: #ffffff;
      transition: background-color 0.2s;
      font-family: Inter, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    }

    html.dark body {
      color: #e5eaf3;
      background-color: #141414;
    }

    .example {
      padding: 24px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }

    html.dark .example {
      border: 1px solid #4c4d4f;
    }

    #app {
      height: 100vh;
    }

    .el-row {
      margin-bottom: 24px;
    }

    .el-row:last-child {
      margin-bottom: 0;
    }

    html::-webkit-scrollbar {
      width: 6px
    }

    html::-webkit-scrollbar:horizontal {
      height: 6px
    }

    html::-webkit-scrollbar-track {
      border-radius: 10px
    }

    html::-webkit-scrollbar-thumb {
      background-color: #0003;
      border-radius: 10px;
      transition: all .2s ease-in-out;
      cursor: pointer;
    }

    html::-webkit-scrollbar-thumb:hover {
      background-color: #0000004d
    }

    html.dark::-webkit-scrollbar-thumb {
      background-color: #fff3
    }

    html.dark::-webkit-scrollbar-thumb:hover {
      background-color: #fff6
    }
  </style>

  <style>
    .loading-wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-family: 'Segoe UI';
    }

    .loading-wrap>h1 {
      color: #409eff;
      font-size: 80px;
      text-align: center;
      margin-top: 0;
    }

    .loading-wrap .loading {
      padding: 98px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .dot {
      width: 32px;
      height: 32px;
      font-size: 32px;
      transform: rotate(45deg);
      position: relative;
      animation: spin 1.2s infinite linear;
    }

    .dot i {
      width: 14px;
      height: 14px;
      position: absolute;
      display: block;
      background-color: #409eff;
      border-radius: 100%;
      transform: scale(0.75);
      transform-origin: 50% 50%;
      opacity: 0.3;
      animation: blink 1s infinite linear alternate;
    }

    .dot i:nth-child(1) {
      top: 0;
      left: 0;
    }

    .dot i:nth-child(2) {
      top: 0;
      right: 0;
      animation-delay: 0.4s;
    }

    .dot i:nth-child(3) {
      right: 0;
      bottom: 0;
      animation-delay: 0.8s;
    }

    .dot i:nth-child(4) {
      bottom: 0;
      left: 0;
      animation-delay: 1.2s;
    }

    @keyframes spin {
      to {
        transform: rotate(405deg);
      }
    }

    @keyframes blink {
      to {
        opacity: 1;
      }
    }

    .loading-wrap .copyright {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="loading-wrap">
      <h1>Element theme darkplus</h1>

      <div class="loading">
        <span class="dot">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </span>
      </div>

      <div class="copyright">Powered by dongwei</div>
    </div>
  </div>

  <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
  <script src="https://unpkg.com/vue3-sfc-loader@0.8.4/dist/vue2-sfc-loader.js"></script>
  <script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
  <script src="https://unpkg.com/fuse.js@6.6.2/dist/fuse.min.js"></script>
  <script src="https://unpkg.com/element-theme-darkplus/utils/darken.js"></script>

  <script type="module">
    const { loadModule } = window['vue2-sfc-loader']

    const options = {
      moduleCache: {
        vue: Vue,
      },
      async getFile(url) {
        const res = await fetch(url)

        if (!res.ok) throw Object.assign(new Error(res.statusText + ' ' + url), { res })

        return {
          getContentData: asBinary => (asBinary ? res.arrayBuffer() : res.text()),
        }
      },
      addStyle(textContent) {
        const style = Object.assign(document.createElement('style'), { textContent })
        const ref = document.head.getElementsByTagName('style')[0] || null

        document.head.insertBefore(style, ref)
      },
    }

    loadModule('./App.vue', options)
      .then(component => new Vue(component).$mount('#app'))
  </script>
</body>

</html>